<template>
	<view>
		<view @click="show = true" class="list-select-box">
			<view class="areaSelect-box">
				<view class="nop">
					{{ selectItem.label || '请选择' }}
				</view>
				<view class="ml20" v-show="isIcon">
					<u-icon v-show="show" color="#607589" name="arrow-up-fill" size="20"></u-icon>
					<u-icon v-show="!show" color="#607589" name="arrow-down-fill" size="20"></u-icon>
				</view>
			</view>
		</view>
		<u-select
			v-model="show"
			:default-value="selectIndex"
			:list="listTemplate"
			@confirm="confirm"
			@cancel="cancel"
		></u-select>
	</view>
</template>
<script>
	export default {
		name: '',

		props: {
			value: {
				type: null,
				default: null
			},
			// 是否默认选中
			defaultSelect: {
				type: Boolean,
				default: true
			},
			list: {
				type: Array,
				default: () => []
				//{label: item.areaName,value: item.areaCode,extra: index}
			},
			isIcon: {
				type: Boolean,
				default: true
			}
		},
		model: {
			event: 'change',
			prop: 'value'
		},
		watch: {
			list: {
				immediate: true,
				handler(newVal, oldVal) {
					this.init(newVal)
				}
			}
			// value() {
			// 	this.setData(this.value)
			// }
		},
		computed: {},
		data() {
			return {
				show: false,
				selectIndex: [0], // 选中下标
				selectItem: {},

				listTemplate: [],
				areaCode: ''
			}
		},
		methods: {
			async init(val) {
				this.getUserInfoData = uni.getStorageSync('getUserInfoData')
				this.getDeptTreeData = uni.getStorageSync('getDeptTreeData')
				let cityList = this.getDeptTreeData[0].children.map((item, index) => {
					return {
						// extra: index,
						label: item.name,
						value: item.code,
						children: item.children
					}
				})
				cityList.unshift({
					label: this.getDeptTreeData[0].name,
					value: this.getDeptTreeData[0].code,
					children: this.getDeptTreeData[0].children
				})
				let areaLevel = this.getUserInfoData.dept.areaLevel
				if (areaLevel == 2) {
					this.areaCode = this.getUserInfoData.dept.parentCode
				} else {
					this.areaCode = this.getUserInfoData.dept.code
				}
				let index = cityList.findIndex((el) => el.value == this.areaCode)
				console.info(`index:`, index)
				if (index == -1) {
					this.selectIndex = [0]
				} else {
					this.selectIndex = [index]
				}
				console.info(`index:`, index)
				console.info(`cityList[index].value:`, cityList[index].value)
				this.listTemplate = cityList
				this.setData(cityList[index].value)
			},
			confirm(arr) {
				let pre = arr[0]
				console.info(`pre:`, pre)
				let itemIndex = this.listTemplate.findIndex((el) => el.value == pre.value)
				this.selectIndex = [itemIndex]
				this.selectItem = this.listTemplate[itemIndex]
				let value = this.listTemplate[itemIndex].value
				this.$emit('confirm', value, this.selectItem)
				this.$emit('change', value, this.selectItem)
			},
			cancel() {
				this.$emit('cancel')
			},
			setData(areaCode) {
				let itemIndex = this.listTemplate.findIndex((item) => item.value == areaCode)
				if (itemIndex > -1) {
					this.selectIndex = [itemIndex]
					this.selectItem = this.listTemplate[itemIndex]
					this.$emit('change', this.listTemplate[itemIndex].value, this.listTemplate[itemIndex])
				}
			}
		},
		mounted() {}
	}
</script>
<style lang="less" scoped>
	.list-select-box {
		width: 100%;
	}
	.areaSelect-box {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		position: relative;
		justify-content: center;

		.nop {
			text-indent: -20rpx;
		}
		.ml20 {
			position: absolute;
			right: 0;
		}
		// justify-content: space-around;
	}
</style>
